<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>检测模板</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="templateQuery" inline>
        <el-form-item label="检测模板编号">
          <el-input v-model="templateQuery.templateId"/>
        </el-form-item>
        <el-form-item label="检测模板名称">
          <el-input v-model="templateQuery.templateName"/>
        </el-form-item>
        <el-form-item label="检测种类">
          <el-input v-model="templateQuery.templateType"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadTemplate" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button @click="refresh" type="primary"plain><el-icon><Refresh /></el-icon>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="showAddProjectWin" type="primary"><el-icon><Plus /></el-icon>新增</el-button>
        <el-button @click="toEdits" type="primary"><el-icon><Edit/></el-icon>修改</el-button>
      </el-button-group>
    </el-col>
  </el-row>

  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="templates" border stripe ref="templateTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="templateId" label="检测模板编号">
          <template #default="scope">
            <el-link @click="showDetail(scope.row.templateId)" type="success">
              {{ scope.row.templateId }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="templateName" label="检测模板名称"/>
        <el-table-column prop="templateType" label="检测种类"/>
        <el-table-column prop="templateStatus" label="是否启用">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.templateStatus == 1">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
              <el-button @click="toEdit(scope.row.templateId)" size="small" type="primary" plain>修改</el-button>
              <el-button @click="toDelete(scope.row)" size="small" type="danger" plain>删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--  分页栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>

  <!-- 新增项目的弹窗 -->
  <el-dialog v-model="templateAddWinDialogVisible"
             title="添加检测项"
             width="50%"
  >
    <template #default>
      <el-form :model="newTemplate" label-width="auto">
        <el-form-item label="检测模板编号">
          <el-input v-model="newTemplate.templateId"/>
        </el-form-item>
        <el-form-item label="检测模板名称">
          <el-input v-model="newTemplate.templateName"/>
        </el-form-item>
      </el-form>
      <el-form-item label="检测种类">
        <el-select style="width: 100px" v-model="newTemplate.detectionType">
          <el-option :value="1" label="尺寸"/>
          <el-option :value="2" label="外观"/>
          <el-option :value="3" label="重量"/>
          <el-option :value="4" label="性能"/>
          <el-option :value="5" label="成分"/>
        </el-select>
      </el-form-item>

    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addProjectSubmit">确定</el-button>
        <el-button @click="cancelAddProject">取消</el-button>
      </div>
    </template>
  </el-dialog>



  <templateDetail :template-id="detailTemplateId"/>

  <!-- 编辑子组件 -->
  <templateEdit :template-id="editTemplateId" @cancel-edit="cancelEdit" @editComplete="loadTemplate()"/>

</template>
<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import templateEdit from "@/views/qc/testingTemplate/template-edit.vue";
import TemplateRequest from "@/api/Template.js";
import templateDetail from "@/views/qc/testingTemplate/template-detail.vue";

// 保存新增项的表单的数据
let newTemplate = ref({});

let templateQuery = ref({});
// 当前页码，默认1
let curPage = ref(1);
// 总条数，默认0
let total = ref(0);
// 查询的项目列表
let templates = ref([]);
let templateTable = ref(null);
let templateAddWinDialogVisible = ref(false);
// 编辑
let editTemplateId = ref(-1);
// 详情的templateId
let detailTemplateId = ref(-1);

function showDetail(templateId) {
  detailTemplateId.value = templateId;
}

function refresh(){
  templateQuery.value = {};
  loadTemplate();
}



//新增事件
function showAddProjectWin() {
  templateAddWinDialogVisible.value = true;
}
//新增项目的提交按钮事件
function addProjectSubmit() {
  TemplateRequest.saveTemplate(newTemplate.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      cancelAddProject();
    } else if (res.code == 300) {
      ElMessage({
        type: "warning",
        message: "项目编号重复"
      });
    } else {
      ElMessage({
        type: "warning",
        message: "项目添加失败"
      });
    }
  })
}
// 取消新增项目的按钮事件
function cancelAddProject() {
  // 将newProject置空
  newTemplate = ref({});
  // 关闭弹窗
  templateAddWinDialogVisible.value = false;
}

//加载项目列表
function loadTemplate() {
  // 调用API来查询项目列表
  TemplateRequest.loadTemplate(templateQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    console.log(total.value)
    // 将查询的列表赋值给defects
    templates.value = res.data.list;
  })
}


/**
 * 工具栏编辑按钮事件
 */
function toEdits(){
  let selectedRows = templateTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toEdit(selectedRows[0].templateId);
  }
}
function cancelEdit(){
  editTemplateId.value = -1;
}

/**
 * 行编辑按钮事件
 * @param templateId
 */
function toEdit(templateId) {
  editTemplateId.value = templateId;
}
/**
 * 编辑完成的事件
 */
function editCompletesSS(){
  // 更新数据表
  cancelEdit();
}


// 分页事件
function changePage(value) {
  curPage.value = value;
  loadTemplate();
}


/**
 * 行删除按钮事件
 * @param
 */
function toDelete(template) {
  ElMessageBox.confirm(
      '您确定要将项目[' + template.templateName + "]删除吗？",
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    TemplateRequest.deleteTemplate(template.templateId,res=>{
      ElMessage({
        type:"success",
        message:"操作完成"
      });
      loadTemplate();
    })
  }).catch(()=>{});
}
onMounted(() => {
  loadTemplate();
  changePage();
});

</script>